<template>
	<Container>
		<view class="header">
			<image class="image" :src="assignment.optionArticles[1].imageUrl" mode="aspectFit"></image>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
		</view>
		<view class="article">
			<image
				class="articleImg"
				:style="{ transition: transition, transform: 'translate(' + moveX + 'px,' + moveY + 'px)' }"
				:src="assignment.optionArticles[0].imageUrl"
				mode="aspectFit"
				@touchstart="start"
				@touchmove="move"
				@touchend="end"
			></image>
		</view>
		<Question :question="assignment.questionName" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
export default {
	data() {
		return {
			selected: [],
			moveX: 0,
			moveY: 0,
			transition: ''
		}
	},
	mixins: [mixins],
	components: { AudioIcon, Question, Container },
	methods: {
		start: function($event) {
			;[this.X, this.Y, this.transition] = [$event.changedTouches[0].pageX, $event.changedTouches[0].pageY, 'all 0s']
			const query = uni.createSelectorQuery().in(this)
			query
				.select('.image')
				.boundingClientRect(data => {
					;[this.ATop, this.ALeft, this.AWidth, this.AHeight] = [
						data.top + (this.config.screenWidth / 750) * 40,
						data.left + (this.config.screenWidth / 750) * 15,
						data.width,
						data.height
					]
				})
				.exec()
		},
		move: function($event) {
			;[this.moveX, this.moveY] = [$event.changedTouches[0].pageX - this.X, $event.changedTouches[0].pageY - this.Y]
		},
		end: function($event) {
			if (this.moveX === 0 && this.moveY === 0) return
			const query = uni.createSelectorQuery().in(this)
			query
				.select('.articleImg')
				.boundingClientRect(data => {
					const position = this.assignment.comparedArticle.position
					const [BTop, BLeft, BWidth, BHeight] = [data.top, data.left, data.width, data.height]
					switch (position) {
						case 'top':
							if (BLeft > this.ALeft * 0.7 && BLeft + BWidth < this.ALeft * 1.3 + this.AWidth && BTop + BHeight < this.ATop + this.AHeight / 2) {
								this.$parent.next({
									isSure: true
								})
							} else {
								this.initB()
								this.$parent.next()
							}
							break
						case 'bottom':
							if (BLeft > this.ALeft * 0.7 && BLeft + BWidth < this.ALeft * 1.3 + this.AWidth && BTop + BHeight > this.ATop + this.AHeight / 2) {
								this.$parent.next({
									isSure: true
								})
							} else {
								this.initB()
								this.$parent.next()
							}
							break
						case 'left':
							if (BTop > this.ATop * 0.7 && BTop + BHeight < this.ATop * 1.3 + this.AHeight && BLeft + BWidth < this.ALeft + this.AWidth / 2) {
								this.$parent.next({
									isSure: true
								})
							} else {
								this.initB()
								this.$parent.next()
							}
							break
						case 'right':
							if (BTop > this.ATop * 0.7 && BTop + BHeight < this.ATop * 1.3 + this.AHeight && BLeft + BWidth > this.ALeft + this.AWidth / 2) {
								this.$parent.next({
									isSure: true
								})
							} else {
								this.initB()
								this.$parent.next()
							}
							break
					}
				})
				.exec()
		},
		initB: function() {
			;[this.moveX, this.moveY, this.transition] = [0, 0, 'all .5s']
		}
	}
}
</script>

<style scoped lang="stylus">
.header
	width 720rpx
	height 50vh
	border-radius 70rpx
	border 12rpx solid #FCC77D
	box-sizing border-box
	transition all 0.3s
	display flex
	justify-content center
	align-items center
	position relative
	margin 4vh 0
	.image
		width 40%
		height 40%
.article
	width 250rpx
	height 250rpx
	background white
	border 10rpx solid #F29E7A
	border-radius 40rpx
	box-sizing border-box
	display flex
	justify-content center
	align-items center
	margin 2vh 0
	.articleImg
		width 80%
		height 80%
</style>
